<template>
  <div>
    <base-modal
      class="intelligent-standard-container"
      :show.sync="visible"
      :title="title"
      width="500px"
      append-to-body
    >
      <div class="intelligent-standard">
        <p class="title">{{$t('common.form.preview.attachment.intelligentQualityInspection')}}</p>
        <div class="tips">{{$t('common.form.tip.attachment.tips6')}}</div>
        <p class="title">{{$t('common.form.preview.attachment.qualityInspectionRequirements')}}</p>
        <div class="tips">
          {{$t('common.form.tip.attachment.tips7', {data1:intelligentConfig.minPictureCheckScore})}}
          <br>
          {{$t('common.form.tip.attachment.tips8')}}
          <template v-if="minTaskCheckScore">
            {{$t('common.form.tip.attachment.tips9', {data1:intelligentConfig.minTaskCheckScore})}}
          </template>
          <template v-if="minTaskCheckScore && minTaskCheckCount">
            {{ $t('common.base.or') }}
          </template>
          <template v-if="minTaskCheckCount">
            {{$t('common.form.tip.attachment.tips10', {data1:intelligentConfig.minTaskCheckCount})}}
          </template>
        </div>
        <p class="title">{{$t('common.form.preview.attachment.samplePicture')}}</p>
        <div class="intelligent-img-container tips">
          <div v-for="(item, i) in examplePictures" :key="i" class="intelligent-img-warp">
            <img
              ref="img"
              class="intelligent-img el-image-viewer__img"
              :src="item.ossUrl"
              @click="handlePreviewFile(item)"
            />
          </div>
        </div>
      </div>

      <div class="dialog-footer" slot="footer">
        <el-button @click="visible = false">{{$t('common.base.close')}}</el-button>
      </div>
    </base-modal>
  </div>
</template>

<script>
import i18n from '@src/locales'
import _ from 'lodash'
export default {
  name: 'intelligent-standard-dialog',
  props: {
    intelligentConfig: {
      type: Object,
      default: () => ({})
    },
  },
  data() {
    return {
      visible: false,
      title: i18n.t('common.form.preview.attachment.qualityInspectionSpecification')
    }
  },
  computed: {
    examplePictures(){
      return this.intelligentConfig.examplePictures || []
    },
    minTaskCheckScore() {
      return Reflect.has(this.intelligentConfig, 'minTaskCheckScore') && _.isNumber(this.intelligentConfig.minTaskCheckScore)
    },
    minTaskCheckCount() {
      return Reflect.has(this.intelligentConfig, 'minTaskCheckCount') && _.isNumber(this.intelligentConfig.minTaskCheckCount)
    }
  },
  methods: {
    open() {
      this.visible = true
    },
    handlePreviewFile(file) {
      try {
        this.$previewElementImg(file.ossUrl, [file].filter(item=>/\.(png|bmp|gif|jpg|jpeg|tiff|image)$/i.test(item.ossUrl || item)));
      } catch (error) {
        console.error(error);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.intelligent-standard {
  padding: 20px;
  .tips {
    margin-bottom: 16px;
    color: #595959;
    font-size: 12px;
  }
  .title {
    font-weight: bold;
  }
}
.intelligent-img-container {
  display: flex;
  flex-wrap: wrap;
  .intelligent-img-warp {
    display: flex;
    align-items: center;
    width: 88px;
    height: 88px;
    overflow: hidden;
    padding: 8px;
    cursor: pointer;
    .intelligent-img {
      width: auto;
      height: 100%;
    }
  }
}
</style>